<script setup lang="ts">
    import { ref, onMounted } from 'vue'
    import { useRoute, useRouter } from 'vue-router'
    import { loginApi } from '@/api'
    import logo from '@/assets/images/logo.png'

    const { query } = useRoute()
    const router = useRouter()
    const appID = 'wx14617686f4d24e99'
    const checked = ref(false)

    const getWxCode = () =>{
        const origin = import.meta.env.VITE_BASE_PAGE + 'redirect'
        if (!query.code) {
            window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appID}&redirect_uri=${encodeURIComponent(origin)}&response_type=code&scope=snsapi_userinfo&state=1#wechat_redirect`
        }
    }
    const wxLogin = async() => {
        const { data } = await loginApi({ code: query.code })
        localStorage.setItem('token', data)
        router.replace({ path: '/' })
    }

    onMounted(() => {
        getWxCode()
    })
</script>

<template>
    <div class="fixed left-10 right-10 top-1/3 flex flex-col items-center">
        <van-image
            width="5rem"
            fit="cover"
            class="mb-10"
            :src="logo"
        />
        <van-button round block color="#39a9ed" @click="wxLogin">微信登录</van-button>
        <van-checkbox v-model="checked" shape="square" icon-size="16" checked-color="#39a9ed" class="mt-2.5 text-sm">阅读并同意<RouterLink to="/">《隐私政策》</RouterLink><RouterLink to="/">《用户协议》</RouterLink></van-checkbox>
    </div>
</template>
